Attributes and Links

Attributes

Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign. Attributes are also used to modify elements, and are useful when adding links, images, supporting accessibility (for example, alt text and aria labels), adding style with CSS and interactions with Javascript. In today's activity, we are going to attrbutes them to create links. But first, let's examine the fun example of the language attribute

Example

Paragraph in English

Paragraph en Español

HTML:

<p lang="en">Paragraph in English</p>

<p lang="es">Paragraph en Español</p>

In the examples above, "lang" is the attribute name and "en" and "es" are the values.

Summary

• Opening tags can carry attributes, which tell us more about the content of that element.
• Attributes require a name and a value. It gets interesting when we introduce variables as attribute values...more on this later.

The W3School provides a complete list of attributes on the W3school attribute reference

Links

Links are the defining feature of the web because they allow you to move from one web page to another, and enabling the very idea of browsing or surfing. You will commonly come across the following types of links:

• Links from one website to another
• Links from one page to another on the same website
• Links from one part of a web page to another part of the same page
• Links that open in a new browser window
• Links that start up your email program and address a new email to someone

Links are created by using the anchor element. There are many different kinds of links you can make, but for now we'll stick with linking to another page (instead of an email address, or an image, or some other service)They also need to include a hypertext reference (directions where to go). To include a reference of our links, we need to use the "href" attribute. Let's check out a couple of link examples. In the first example, we'll demonstrate linking to another web page.